<template>
	<view class="never">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="提现" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()" right-text="账户"
				@clickRight="$util.toUrl('/pages/bankcard/bankcard?from_web=1')"></uni-nav-bar>
		</view>
		
		<view class="nav_box"></view>
		
		<view class="list" v-for="(item,index) in list" :key="index" @click="onSelect(item)">
			<view class="select flex_center">
				<image :src="`/static/public/select${
					select.indexOf(item.id) > -1 ? '_s' : ''
				}.png`" class="select_image"></image>
				<view class="left">
					<view class="name hidden">{{item.name}}</view>
					<view class="text hidden">订单编号：{{item.order_sn}}</view>
					<view class="text hidden">完成时间：
						<uni-dateformat :date="item.create_time" format="MM-dd hh:mm"></uni-dateformat>
					</view>
				</view>
			</view>
			<view class="right">
				<i>￥</i>{{item.store_price}}
			</view>
		</view>
		<empty v-if="!list.length && total == 0"></empty>
		<view class="loading" v-if="!list.length && total == 1">
			<HevuLoading type="loading4" :opacity="0" loadingText="加载中..." text-color="#FD2A53"
				loadingIconColor="#FD2A53" />
		</view>

		<view class="btn">
			<view class="header flex_center" @click="onSelectAll">
				<image :src="`/static/public/select${select.length == list.length ? '_s' : ''}.png`"></image>
				<text>全选</text>
			</view>
			<view class="btn_box flex_r_between">
				<view class="price">总共<text><i>￥</i>{{allPrice.toFixed(2)}}</text></view>
				<view class="sub_button" :id="select.length == 0 ? 'no' : ''" @click="applyWithdrawal">提现</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	import navBar from '@//compentents/navBar/navBar.vue';
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	export default {
		components: {
			empty,
			navBar,
			HevuLoading
		},
		data() {
			return {
				page: 1,
				list: [],
				total: 1,

				select: [],

				allPrice: 0,
			}
		},
		methods: {
			getList() {
				this.$get('/user_withdrawal/getOrderBalance', {
					page: this.page,
					status: 2
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data)
				})
			},

			onSelect(item) {
				var index = this.select.indexOf(item.id);
				if (index > -1) {
					this.select.splice(index, 1);
					this.allPrice -= Number(item.store_price);
				} else {
					this.select.push(item.id);
					this.allPrice += Number(item.store_price);
				}
			},

			onSelectAll() {
				if (this.select.length == this.list.length) {
					this.select = [];
					this.allPrice = 0;
				} else {
					this.select = [];
					this.allPrice = 0;
					this.list.forEach(element => {
						this.allPrice += Number(element.store_price);
						this.select.push(element.id)
					})
				}
			},

			applyWithdrawal() {
				if (this.select.length == 0) {
					return this.$util.msg('请选择提现订单')
				}
				this.$post('/user_withdrawal/applyWithdrawal', {
					ids: this.select.length == 1 ? `${this.select[0]}` : this.select.join(','),
					type: 2
				}).then(res => {
					this.$util.msg(res.msg);
					this.list = [];
					this.page = 1;
					this.getList();
				})
			},
		},

		onLoad() {
			this.getList();
		},

		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getList();
			}
		}
	}
</script>

<style scoped lang="less">
	.never {
		min-height: 100vh;
		background: #FFFFFF;
		padding: 32rpx 32rpx 180rpx;
	}
	
	.nav_bar {
		background: #FFF;
	
		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}

	.list {
		display: flex;
		align-items: flex-end;
		padding: 30rpx 0;

		.select {
			flex: 1;
			overflow: hidden;

			.select_image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 32rpx;
			}

			.left {
				flex: 1;
				overflow: hidden;

				.name {
					font-weight: 500;
					font-size: 32rpx;
					color: #131313;
				}

				.text {
					padding-top: 8rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 32rpx;
				}

			}
		}



		.right {
			i {
				font-style: normal;
				font-size: 28rpx;
			}

			font-weight: 600;
			color: #131313;
			font-size: 40rpx;
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #FFF;

		.header {
			padding: 6rpx 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(230, 230, 230, 0.5);

			image {
				width: 28rpx;
				height: 28rpx;
			}

			text {
				margin-left: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}
		}

		.btn_box {
			padding: 0 32rpx 30rpx;

			.price {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;

				text {
					font-weight: 600;
					font-size: 32rpx;
					color: #FD2A53;

					i {
						font-style: normal;
						font-size: 28rpx;
					}
				}
			}

			.sub_button {
				width: 228rpx;
				height: 72rpx;
				background: #FD2A53;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}

			#no {
				background: rgba(253, 42, 83, .2);
			}
		}
	}
</style>